@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   mobile_style.css — 메인 페이지 모바일 반응형 (모바일 브레이크포인트 단일 블록)

   PC 는 전부 calc(var(--px) * N) = 캔버스(1905) 비례라, 모바일 뷰포트에선
   "데스크탑 전체를 비례 축소"한 상태가 된다(18px → 3.5px). 따라서 여기서
   요소마다 vw / % 로 재정의한다.

   원칙 (.claude/skills/mobile-process)
   - 미디어쿼리 블록 내부에서만 작업. PC(바깥) 수정 금지
   - 부모 height/aspect 해제 → 자식(rltv)이 높이를 만든다
   - 콘텐츠는 in-flow(relative), 장식만 absol 유지
   - absol → rltv 전환은 position/top/left/right/bottom/transform 5종 세트 리셋
   - 최소 폰트 3.3vw · 가운데 정렬 원칙
   - ★ GSAP 핀(con07·con08·con13)은 모바일에서 전부 해제 (js/animation.js matchMedia)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {

  /* ══════════ 글로벌 ══════════ */
  /* TOP 버튼 — header.css 는 PC 정의가 자기 미디어쿼리보다 아래에 있어 덮어써지므로 여기서 잡는다.
     bottom 은 하단 퀵바(fixed) 위로 띄우는 값 */
  .top_btn {
    bottom: 26vw;
  }

  .top_btn_img {
    width: 12vw;
  }

  .top_btn_txt {
    font-size: 3vw;
    line-height: 1;
  }

  /* 전역 section{font-size:calc(--px*18)} 는 모바일에서 3.5px 이 된다 → 상속 기준값 재정의 */
  section {
    font-size: 3.3vw;
    letter-spacing: -0.1vw;
  }

  section img {
    width: 100%;
  }


  /* ══════════ MAIN : 메인비주얼 ══════════ */
  .main {
    padding-top: 26vw;
    padding-bottom: 0;
    background-size:
      190% auto,
      190% auto,
      100% 100%;
    background-position:
      center 0,
      center 10vw,
      0 0;
  }

  .main_copy {
    font-size: 5.4vw;
    line-height: 8vw;
    letter-spacing: -0.2vw;
    white-space: normal;
    text-align: center;
  }

  /* Low investment · High margin 을 한 줄에 두고 로고는 wrap 으로 그 아래 줄에 */
  .main_mid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5vw;
    row-gap: 2vw;
    column-gap: 6vw;
  }

  .main_side {
    justify-content: center;
    margin-top: 0;
    column-gap: 3vw;
  }

  .main_side_l {
    order: 1;
    width: auto;
    margin-left: 0;
  }

  .main_side_r {
    order: 2;
    width: auto;
    margin-right: 0;
  }

  .main_side_tt {
    font-size: 3.6vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }

  .main_line {
    display: none;
  }

  .main_logo {
    order: 3;
    width: 62vw;
  }

  .main_txt {
    margin-top: 6vw;
    font-size: 3.4vw;
    line-height: 6vw;
    white-space: normal;
  }

  .main_tags {
    flex-wrap: wrap;
    margin-top: 6vw;
    gap: 2vw;
    padding: 0 5vw;
  }

  .main_tag {
    width: auto;
    padding: 2.4vw 4.5vw;
  }

  .main_tag_01 {
    width: auto;
  }

  .main_tag_tt {
    font-size: 3.4vw;
    line-height: 1.3;
  }

  .main_varchar {
    width: 86vw;
    margin-top: 12vw;
  }


  /* ══════════ CON01 : 주점 창업 문제 제기 ══════════ */
  .con01 {
    padding-top: 14vw;
    padding-bottom: 12vw;
  }

  .con01_search {
    width: 75%;
    height: auto;
    padding: 1.4vw 3vw 1.4vw 6vw;
  }

  .con01_search_txt {
    font-size: 4.2vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }

  /* 타이핑 커서 — --px 기준이면 모바일에서 0.4px 로 사라진다 → vw 로 다시 잡는다 */
  .con01_caret {
    width: 1px;
    height: 4.6vw;
    margin-left: 0.8vw;
  }

  .con01_search_img {
    width: 9vw;
  }

  .con01_list_wrap {
    margin-top: 8vw;
  }

  /* 원이 wrap 되므로 관통 구분선은 의미가 없어진다 */
  .con01_line {
    display: none;
  }

  .con01_list {
    flex-wrap: wrap;
    column-gap: 3vw;
    row-gap: 3vw;
    padding: 0 5vw;
  }

  .con01_circle {
    width: 27vw;
    height: 27vw;
    box-shadow: inset 0 0 5vw 2vw rgba(0, 42, 94, 0.45);
    font-size: 3.7vw;
    line-height: 5vw;
    letter-spacing: -0.1vw;
  }

  /* 뒷면 로고 — --px 기준이면 원(27vw) 대비 너무 작아진다 → 원 폭의 약 60% 로 다시 잡는다 */
  .con01_circle_back {
    width: 16vw;
  }

  .con01_desc {
    margin-top: 8vw;
    padding: 0 5vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
  }

  /* 2줄로 접히면 border-bottom 은 마지막 줄에만 그려진다 → 밑줄은 text-decoration 으로 */
  .con01_desc_line {
    border-bottom: 0;
    text-decoration: underline;
  }


  /* ══════════ CON02 : 술만 파는 공간이 아닙니다 ══════════ */
  .con02 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 14vw 6% 14vw;
  }

  .con02_left {
    align-items: center;
    margin-top: 0;
  }

  .con02_tit {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
    text-align: center;
  }

  .con02_txt {
    margin-top: 5vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
    text-align: center;
  }

  .con02_txt2 {
    margin-top: 4vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
    text-align: center;
  }

  /* 좌하단 파스타·칵테일 잔 = 데스크탑 여백을 채우던 장식 → 모바일은 시각 노이즈 */
  .con02_pasta {
    display: none;
  }

  .con02_glass {
    display: none;
  }

  .con02_cards {
    width: 100%;
    margin-top: 9vw;
    row-gap: 9vw;
  }

  /* 테이프가 카드 좌상단에 얹히므로 padding-top 으로 본문을 밀어 내린다 */
  .con02_card {
    height: auto;
    padding: 13vw 5vw 8vw 6vw;
  }

  .con02_card_02 {
    margin-top: 0;
  }

  .con02_card_03 {
    margin-top: 0;
  }

  .con02_card_tit {
    font-size: 4.2vw;
    line-height: 6.4vw;
    letter-spacing: -0.1vw;
  }

  .con02_card_txt {
    margin-top: 3.5vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
  }

  .con02_tape_01 {
    left: 5%;
    top: -3vw;
    width: 38vw;
  }

  .con02_tape_02 {
    left: 5%;
    top: -3vw;
    width: 33vw;
  }

  .con02_tape_03 {
    left: 5%;
    top: -3vw;
    width: 39vw;
  }


  /* ══════════ CON03 : 오래 머무는 공간 ══════════ */
  .con03 {
    padding: 13vw 0 14vw;
  }

  .con03_logo {
    width: 24vw;
  }

  .con03_tit {
    margin-top: 4vw;
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  /* 중앙 사진 = 콘텐츠 → 흐름으로. order:1 로 카드 2장 뒤에 배치 */
  .con03_photo {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 88%;
    margin-top: 8vw;
    order: 1;
  }

  .con03_list {
    flex-direction: column;
    align-items: center;
    margin-top: 9vw;
    padding-left: 6%;
    padding-right: 6%;
    row-gap: 9vw;
  }

  .con03_item {
    align-items: center;
    width: 100%;
  }

  .con03_mark_l {
    width: 34vw;
    margin-left: 0;
  }

  .con03_mark_r {
    width: 27vw;
    margin-left: 0;
  }

  .con03_card {
    height: auto;
    padding: 6vw 4vw 8vw;
  }

  .con03_card_tit {
    font-size: 4.2vw;
    line-height: 6.4vw;
    letter-spacing: -0.1vw;
  }

  .con03_card_line {
    width: 60%;
    margin-top: 3vw;
  }

  .con03_card_txt {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
  }

  .con03_card_txt2 {
    margin-top: 3vw;
  }


  /* ══════════ CON04 : 맛까지 다릅니다 ══════════ */
  .con04 {
    padding-top: 13vw;
    padding-bottom: 12vw;
  }

  .con04_tit {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  .con04_desc {
    margin-top: 4vw;
    padding: 0 5vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
  }

  /* 일러스트 = 콘텐츠 → 흐름으로 */
  .con04_deco {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 34vw;
    margin-top: 7vw;
  }

  .con04_cards {
    flex-direction: column;
    align-items: center;
    width: 88%;
    margin-top: -2vw;
    column-gap: 0;
    row-gap: 6vw;
  }

  /* padding-top 은 좌상단 번호 배지(top 3vw + 높이 9vw) 아래로 본문을 밀어 내리는 값 */
  .con04_card {
    width: 100%;
    height: auto;
    padding: 16vw 5vw 8vw 8vw;
  }

  .con04_num {
    left: -3%;
    top: 3vw;
    width: 23vw;
    height: 9vw;
    padding-left: 11vw;
    font-size: 3.6vw;
    line-height: 1.3;
  }

  .con04_card_tit {
    margin-left: 0;
    font-size: 4.2vw;
    line-height: 6.2vw;
    letter-spacing: -0.1vw;
  }

  .con04_line {
    width: 100%;
    margin-top: 4vw;
  }

  .con04_card_txt {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
  }


  /* ══════════ CON05 : 빠르게 사랑받습니다 / 얼마나 남느냐 ══════════ */
  .con05 {
    padding-top: 14vw;
    padding-bottom: 12vw;
    background-size: 4vw 100%;
    background-position: 2vw 0;
  }

  /* 다크 CCTV 배경 — 상단 콘텐츠(타이틀~파란 카드) 높이만큼만 덮는다 */
  .con05_cctv {
    width: 100%;
    height: 182vw;
  }

  .con05_tit {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  .con05_desc {
    margin-top: 4vw;
    padding: 0 5vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
  }

  .con05_sales {
    margin-top: 10vw;
  }

  /* PC 는 트랙에 고정높이를 줘 글 0건에도 자리를 지키지만,
     모바일은 글이 없으면 영역 자체를 차지하지 않아야 하므로 auto 로 되돌린다 */
  .con05_sales_slide {
    height: auto;
  }

  .con05_card {
    width: 52vw;
    height: auto;
  }

  .con05_card_head {
    height: 13vw;
  }

  .con05_card_name {
    font-size: 4vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con05_card_body {
    height: auto;
    padding: 5vw 0 6vw;
  }

  .con05_card_month {
    font-size: 3.3vw;
    line-height: 1.3;
  }

  .con05_card_price {
    margin-top: 3vw;
    font-size: 5.6vw;
    line-height: 1.2;
    letter-spacing: -0.15vw;
  }

  /* 파란 카드 = 콘텐츠 → 마퀴 아래 흐름으로 (PC 는 마퀴 위 겹침 배치) */
  .con05_visual {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 88%;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 10vw;
  }

  .con05_badge {
    width: 44vw;
    height: 11vw;
    margin-top: 7vw;
  }

  .con05_badge_tt {
    font-size: 3.8vw;
    line-height: 1.3;
  }

  .con05_amount {
    margin-top: 5vw;
    font-size: 9.5vw;
    line-height: 1.2;
    letter-spacing: -0.4vw;
  }

  .con05_base {
    margin-top: 3vw;
    font-size: 3.3vw;
    line-height: 1.3;
  }

  .con05_plate {
    width: 82vw;
    margin-top: 4vw;
  }

  .con05_tape {
    width: 26vw;
    margin-top: 14vw;
  }

  .con05_tit2 {
    max-width: 92%;
    margin-top: 3vw;
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
    word-break: keep-all;
  }

  .con05_desc2 {
    margin-top: 4vw;
    padding: 0 5vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
  }

  .con05_panels {
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin-top: 8vw;
  }

  .con05_panel_l {
    justify-content: center;
    width: 100%;
    padding-top: 10vw;
    padding-left: 0;
    padding-bottom: 10vw;
    border-right: 0;
    border-bottom: 1px solid #000000;
    background-image: repeating-linear-gradient(180deg, #e0edf9 0 2.2vw, #ebf5fe 2.2vw 4.3vw);
  }

  .con05_tteok {
    left: auto;
    top: auto;
    width: 76vw;
    right: 0;
    bottom: 0;
  }

  .con05_circle {
    width: 56vw;
    height: 56vw;
    margin-right: 21vw;
    margin-top: -3vw;
    margin-bottom: 6vw;
  }

  .con05_circle_tt {
    font-size: 4.2vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con05_circle_num {
    margin-top: 3vw;
    font-size: 10vw;
    line-height: 1.2;
    letter-spacing: -0.3vw;
  }

  .con05_panel_r {
    align-items: center;
    width: 100%;
    padding: 8vw 4vw 9vw;
  }

  .con05_note {
    align-self: flex-end;
    font-size: 3vw;
    line-height: 1.3;
  }

  .con05_table {
    width: 100%;
    height: auto;
    margin-top: 3vw;
    padding: 5vw 3vw 6vw;
  }

  .con05_table_head {
    width: 100%;
  }

  .con05_table_th {
    font-size: 3.4vw;
    line-height: 1.4;
  }

  .con05_table_c1 {
    width: 30%;
  }

  .con05_table_c2 {
    width: 38%;
  }

  .con05_table_c3 {
    width: 32%;
  }

  .con05_table_line {
    width: 100%;
    margin-top: 3vw;
    margin-left: 0;
    background-image: repeating-linear-gradient(90deg, #000000 0 1.1vw, transparent 1.1vw 1.6vw);
  }

  .con05_table_rows {
    width: 100%;
    margin-top: 2vw;
  }

  .con05_table_row {
    font-size: 3.3vw;
    line-height: 7.6vw;
  }

  .con05_table_sum {
    width: 100%;
    height: 14vw;
    margin-top: 3vw;
  }

  .con05_table_sum_tt {
    width: 30%;
    font-size: 4vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con05_table_sum_num {
    width: 38%;
    font-size: 3.7vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con05_table_ratio {
    width: 32%;
    margin-left: 0;
  }

  .con05_table_ratio_tt {
    font-size: 4.6vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  /* vr / ★r 원 — 좌·우 패널 경계(좌패널 하단 = padding 10 + 원 53 + 6 + 10 ≈ 79.2vw)에 걸쳐 가로로 나란히.
     원 지름 18vw 의 절반을 빼서 경계선이 원 중심을 지나게 한다 */
  .con05_vr_01 {
    left: 28.9%;
    top: 70.2vw;
    width: 18vw;
    height: 18vw;
  }

  .con05_vr_02 {
    left: 51%;
    top: 70.2vw;
    width: 18vw;
    height: 18vw;
    box-shadow: 0 -0.6vw 0.8vw rgba(0, 0, 0, 0.149);
  }

  .con05_vr_img {
    width: 10vw;
  }

  .con05_ar_img {
    width: 10vw;
  }

  .con05_standee {
    display: flex;
    left: 81.5%;
    top: 158.4vw;
    width: 26vw;
  }


  /* ══════════ CON06 : 3분할 (덜 투자하고 / 쉽게 일하고 / 더 남깁니다) ══════════ */
  .con06_cols {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-right: 0;
  }

  .con06_col {
    width: 100%;
    height: auto;
    padding-bottom: 0;
  }

  .con06_head {
    margin-top: 14vw;
  }

  .con06_tit {
    font-size: 9vw;
    line-height: 1.2;
    letter-spacing: -0.3vw;
  }

  .con06_badge {
    width: 34vw;
    height: 9vw;
    margin-top: -2vw;
    font-size: 3.6vw;
    letter-spacing: -0.1vw;
  }

  /* 호버 패널 → 터치 기기엔 호버가 없으므로 항상 노출 (흐름으로 전환) */
  .con06_panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    height: auto;
    margin-top: 10vw;
    padding-bottom: 10vw;
  }

  .con06_col:hover .con06_panel {
    transform: none;
  }

  /* 모바일은 호버가 없어 패널이 항상 펼쳐있다 → 내부 등장용 대기값(opacity:0)을 해제.
     안 풀면 본문·사진이 통째로 안 보인다 (PC 호버 모션은 style.css 에서만 동작) */
  .con06_panel_tit,
  .con06_panel_txt,
  .con06_store,
  .con06_circles,
  .con06_photos,
  .con06_food,
  .con06_rate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .con06_panel_tit {
    margin-top: 9vw;
    font-size: 5.4vw;
    line-height: 1.4;
    letter-spacing: -0.15vw;
  }

  .con06_col_01 .con06_panel_tit {
    margin-top: 9vw;
  }

  .con06_panel_txt {
    margin-top: 3.5vw;
    padding: 0 8vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
  }

  .con06_store {
    width: 76vw;
    margin-top: 7vw;
    margin-bottom: -15vw;
  }

  /* 음식 사진 2장 — PC 와 동일하게 absol 로 원 묶음 뒤에 좌우로 걸치게 (DOM 이 앞이라 원 아래로 깔림).
     좌표는 부모 .con06_panel 기준으로 재환산 */
  .con06_food_01 {
    left: 52%;
    top: 55vw;
    width: 60vw;
  }

  .con06_food_02 {
    left: -12%;
    top: 90vw;
    width: 58vw;
  }

  .con06_circles {
    flex-wrap: wrap;
    margin-top: 7vw;
    column-gap: 0;
    row-gap: 0;
  }

  .con06_circle {
    width: 36vw;
    height: 36vw;
  }

  .con06_circle_txt {
    font-size: 3.5vw;
    line-height: 4.8vw;
  }

  .con06_circle_02 {
    margin-left: -3vw;
  }

  .con06_circle_03 {
    margin-left: -3vw;
    margin-top: -3vw;
    order: 1;
  }

  .con06_circle_04 {
    margin-left: 0;
    margin-top: -3vw;
  }

  .con06_photos {
    margin-top: 7vw;
    column-gap: 2vw;
  }

  .con06_photo_01 {
    width: 40vw;
  }

  .con06_photo_02 {
    width: 40vw;
  }

  /* 원가율 원 = 사진 위로 겹치는 시안 구성 → PC 처럼 absol 유지 */
  .con06_rate {
    /* position: relative; */
    /* top: auto; */
    /* left: auto; */
    /* right: auto; */
    /* bottom: auto; */
    transform: none;
    width: 36vw;
    height: 36vw;
    margin-top: 0;
    box-shadow: 1vw 1.5vw 5vw rgba(0, 0, 0, 0.15);
    top: 48.3vw;
  }

  .con06_rate_tt {
    font-size: 4.2vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con06_rate_num {
    margin-top: 2vw;
    font-size: 9vw;
    line-height: 1.2;
    letter-spacing: -0.25vw;
  }


  /* ══════════ CON07 : 흔들리지 않는 구조 (★ 핀 해제 → 카드 3장 세로 스택) ══════════ */
  .con07 {
    padding-top: 13vw;
    padding-bottom: 12vw;
  }

  .con07_tit {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  .con07_desc {
    margin-top: 4vw;
    padding: 0 5vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
    letter-spacing: -0.1vw;
  }

  /* PC 는 3장 동일좌표 겹침(핀+scrub) → 모바일은 흐름 스택 */
  .con07_cards {
    flex-direction: column;
    align-items: center;
    width: 88%;
    height: auto;
    margin-top: 8vw;
    row-gap: 5vw;
  }

  .con07_card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
  }

  .con07_card_02 {
    transform: none;
  }

  .con07_card_03 {
    transform: none;
  }

  .con07_card_01 {
    padding-top: 9vw;
    padding-bottom: 0;
  }

  .con07_c1_tit {
    font-size: 4.6vw;
    line-height: 1.4;
    letter-spacing: -0.15vw;
  }

  .con07_c1_txt {
    margin-top: 3.5vw;
    padding: 0 5vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
    letter-spacing: -0.1vw;
  }

  .con07_tabs {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    margin-top: 6vw;
  }

  .con07_tab {
    flex: 1 1 45%;
    height: 11vw;
    font-size: 3.3vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con07_card_02 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 9vw 5vw 9vw;
  }

  .con07_c2_box {
    align-items: center;
    margin-top: 0;
  }

  .con07_c2_tit {
    font-size: 4.6vw;
    line-height: 1.4;
    letter-spacing: -0.15vw;
  }

  .con07_c2_txt {
    margin-top: 3.5vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  /* 2×2 로 접고 con06_circles 와 같은 방식으로 서로 겹치게 (gap 0 + 음수 마진) */
  .con07_steps {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6vw;
    column-gap: 0;
    row-gap: 0;
  }

  .con07_step {
    width: 36vw;
    padding-bottom: 0;
    gap: 1.5vw;
  }

  .con07_step_02 {
    margin-left: -3vw;
  }

  /* 2×2 로 접히면 01·03 / 02·04 가 같은 열에 세로로 놓여 색이 안 엇갈린다 → 3·4 배경만 서로 교환 */
  /* 2행 첫째(03)는 줄 시작이라 겹침 마진 없음, 둘째(04)가 왼쪽 원 위로 겹친다 */
  .con07_step_03 {
    margin-left: 0;
    margin-top: -3vw;
    background: #d9e8f6;
    border-color: #b7d0e6;
  }

  .con07_step_04 {
    margin-left: -3vw;
    margin-top: -3vw;
    background: #fff3cb;
    border-color: #e8dcb1;
  }

  .con07_step_num {
    font-size: 3.3vw;
    line-height: 1.3;
  }

  .con07_step_txt {
    font-size: 3.4vw;
    line-height: 4.8vw;
    letter-spacing: -0.1vw;
  }

  .con07_card_03 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 9vw;
    padding-bottom: 5vw;
  }

  .con07_c3_box {
    align-items: center;
    margin-top: 0;
  }

  .con07_c3_tit {
    font-size: 4.6vw;
    line-height: 1.4;
    letter-spacing: -0.15vw;
  }

  .con07_c3_txt {
    margin-top: 3.5vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  .con07_c3_photo {
    align-self: auto;
    width: 100%;
    height: 52vw;
    margin-top: 7vw;
  }

  /* 행택 = 카드 위로 겹치는 PC 데코 */
  .con07_tag {
    display: none;
  }


  /* ══════════ CON08 : 식사부터 술자리까지 ══════════ */
  .con08 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 13vw;
    padding-bottom: 13vw;
    padding-left: 6%;
    padding-right: 6%;
  }

  .con08_left {
    align-items: center;
    margin-top: 0;
  }

  .con08_tit {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
    white-space: normal;
    text-align: center;
  }

  .con08_desc {
    margin-top: 4vw;
    font-size: 3.4vw;
    line-height: 5.8vw;
    letter-spacing: -0.1vw;
    white-space: normal;
    text-align: center;
  }

  .con08_list {
    width: 100%;
    margin-top: 9vw;
    row-gap: 6vw;
  }

  /* 카드 3장 높이 통일 — 가장 큰 3번(세로로 긴 하이볼 사진, 실측 62.1vw) 기준 */
  .con08_item {
    align-items: center;
    height: 62.1vw;
    padding: 9vw 0 9vw 6vw;
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.05);
  }

  /* 테이프 라벨 — PC 는 카드 좌측 밖, 모바일은 카드 상단에 걸침 */
  .con08_tape_01 {
    left: 4%;
    top: -3vw;
    width: 24vw;
  }

  .con08_tape_02 {
    left: 4%;
    top: -3vw;
    width: 24vw;
  }

  .con08_tape_03 {
    left: 4%;
    top: -3vw;
    width: 24vw;
  }

  /* PC 의 flex-shrink:0 이 남으면 텍스트 칼럼이 카드 폭(330)보다 넓은 370 을 유지해
     white-space:normal 이어도 줄바꿈이 안 일어난다 → 축소 허용 + min-width 해제 */
  .con08_txt {
    flex-shrink: 1;
    min-width: 0;
    margin-top: 0;
  }

  .con08_item_tit {
    font-size: 4vw;
    line-height: 5.8vw;
    letter-spacing: -0.12vw;
    white-space: normal;
  }

  .con08_item_desc {
    margin-top: 2.5vw;
    font-size: 3.2vw;
    line-height: 5vw;
    letter-spacing: -0.1vw;
    white-space: normal;
  }

  .con08_item_img_01 {
    width: 22vw;
    margin-top: 0;
  }

  .con08_item_img_02 {
    width: 24vw;
    margin-top: 0;
  }

  .con08_item_img_03 {
    width: 22vw;
    margin-top: 0;
    margin-right: 0;
  }


  /* ══════════ CON09 : SIGNATURE / 전체 메뉴 안내 ══════════ */
  .con09 {
    padding-bottom: 0;
    background-image: linear-gradient(180deg, #fef8e0 0, #ffffff 70vw);
  }

  .con09_bar {
    height: 2vw;
  }

  .con09_line {
    height: 0.5vw;
    margin-top: 0.6vw;
  }

  .con09_signature {
    flex-direction: column;
    align-items: center;
    padding-top: 22vw;
    padding-bottom: 0vw;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: -34vw;
  }

  /* SIGNATURE 워드마크 = 콘텐츠 → 흐름으로 */
  .con09_title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
  }

  .con09_title_img {
    width: 92%;
  }

  .con09_menu {
    align-items: center;
    width: 100%;
    margin-top: 7vw;
    row-gap: 2vw;
  }

  .con09_menu_item {
    justify-content: center;
  }

  .con09_menu_btn {
    width: 52vw;
    height: 13vw;
  }

  .con09_menu_txt {
    font-size: 4vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  /* 설명 4벌은 absol 겹침(opacity 교체)이라 높이를 부모가 잡아야 한다 */
  .con09_panel {
    align-items: center;
    width: 100%;
    height: 30vw;
    margin-top: 7vw;
    padding-top: 0;
    padding-left: 0;
  }

  /* absol 이라 폭이 shrink-to-fit = 자연폭(패널 꽉 참) → 폭을 묶어야 좌우 여백이 생기고 줄바꿈된다 */
  .con09_panel_txt {
    align-items: center;
    width: 82%;
  }

  .con09_panel_tit {
    font-size: 4.6vw;
    line-height: 1.3;
    letter-spacing: -0.12vw;
    white-space: normal;
  }

  .con09_panel_desc {
    margin-top: 3vw;
    font-size: 3.3vw;
    line-height: 5.2vw;
    letter-spacing: -0.1vw;
    white-space: normal;
    text-align: center;
  }

  /* HOT 배지 — 설명 패널 우상단에 걸치는 위치 (메뉴 리스트 끝 ≈ 89vw) */
  .con09_badge {
    right: 3%;
    top: 91vw;
    width: 20vw;
    height: 20vw;
  }

  .con09_badge_txt {
    font-size: 4.4vw;
    line-height: 1.3;
  }

  /* 접시 사진 4장 = absol 겹침(크로스페이드) → 부모만 흐름으로 내리고 높이 확보 */
  .con09_photos {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 76vw;
    margin-top: 6vw;
  }

  .con09_photo_01 {
    width: 88vw;
  }

  .con09_photo_02 {
    width: 86vw;
  }

  .con09_photo_03 {
    width: 90vw;
  }

  .con09_photo_04 {
    width: 88vw;
  }

  .con09_dark {
    width: 100%;
    padding-top: 44vw;
    padding-bottom: 11vw;
  }

  .con09_dark_tit {
    font-size: 7vw;
    line-height: 1.3;
    letter-spacing: -0.25vw;
    white-space: normal;
  }

  .con09_tab_bar {
    box-sizing: border-box;
    height: auto;
    margin-top: 6vw;
    padding: 4vw 9vw;
  }

  /* 탭 개수가 게시판 분류에 따라 가변이라 wrap 대신 3열 그리드로 고정 */
  .con09_tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: auto;
    column-gap: 2vw;
    row-gap: 2vw;
  }

  .con09_tab_btn {
    font-size: 3.6vw;
    line-height: 6.5vw;
    letter-spacing: -0.1vw;
  }

  .con09_tab::after {
    width: 14vw;
    height: 0.5vw;
  }

  /* 카테고리별 슬라이드가 absol 겹침이라 영역 높이를 직접 잡는다 */
  .con09_slide_area {
    width: 96%;
    height: 49vw;
    margin-top: 8vw;
  }

  .con09_card_name {
    margin-top: 3vw;
    font-size: 3.3vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
    white-space: normal;
    text-align: center;
  }

  /* 카드 좌우가 아니라 슬라이드 영역 하단 가운데에 나란히 (폭이 좁아 좌우 배치는 카드를 먹는다) */
  .con09_arrow_img {
    width: 6vw;
    top: auto;
    bottom: 0;
  }

  .con09_arrow_prev {
    left: 41%;
    right: auto;
  }

  .con09_arrow_next {
    left: 52.8%;
    right: auto;
  }


  /* ══════════ CON10 : 리뷰 슬라이드 ══════════ */
  .con10 {
    padding-top: 22vw;
    padding-bottom: 22vw;
    background-image: radial-gradient(circle 90vw at 50% 50%,
        rgba(26, 129, 255, 0.38) 0%,
        rgba(26, 129, 255, 0.219) 30%,
        rgba(26, 129, 255, 0.083) 50%,
        rgba(26, 129, 255, 0.018) 70%,
        rgba(26, 129, 255, 0) 100%);
  }

  .con10_ring_01 {
    width: 92%;
    height: 92vw;
  }

  .con10_ring_02 {
    width: 68%;
    height: 68vw;
  }

  .con10_orbit {
    width: 68%;
    height: 68vw;
  }

  .con10_dot {
    width: 2.2vw;
    height: 2.2vw;
    left: 84%;
    top: 9.5vw;
    box-shadow: 0 0 3vw 1vw rgba(26, 122, 255, 0.85);
  }

  /* PC 는 좌·우 세로 트랙이 중앙 텍스트 양옆에 떠 있는 구성.
     모바일 폭에선 텍스트를 덮어버리므로 두 트랙을 가로 마퀴 2줄로 펴서 흐름에 넣는다.
     (텍스트 → 라벨 → 트랙 순서는 order 로 잡는다. DOM 은 트랙이 앞) */
  .con10_slide {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
  }

  .con10_slide_left {
    order: 3;
    margin-top: 9vw;
  }

  /* 우 트랙은 좌 트랙과 같은 리뷰 7장(순서만 다름) = 모바일에선 중복 → 한 줄만 남긴다 */
  .con10_slide_right {
    display: none;
  }

  /* 카드 크기는 PC 에서 299×420 으로 통일했으므로 폭만 재지정 */
  .con10_card {
    width: 62vw;
  }

  .con10_txt {
    order: 1;
    padding: 0 5vw;
  }

  .con10_tit {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
    white-space: normal;
  }

  .con10_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
    white-space: normal;
  }

  /* 파란 라벨 2개 — 트랙 위 겹침 좌표를 버리고 텍스트 아래 흐름으로 (order 2) */
  .con10_label {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    order: 2;
    width: 56vw;
    font-size: 3.3vw;
    line-height: 5vw;
    letter-spacing: -0.1vw;
    white-space: normal;
    text-align: center;
  }

  /* padding 은 peel 레이어가 가진다 (PC 와 동일 구조) */
  .con10_label .peel-main,
  .con10_label .peel-flap {
    padding-top: 2.2vw;
    padding-bottom: 2.2vw;
  }

  .con10_label_01 {
    margin-top: 7vw;
  }

  .con10_label_02 {
    margin-top: 2vw;
  }


  /* ══════════ CON11 : VARCHAR MOMENT (인테리어 마퀴) ══════════ */
  .con11 {
    padding-top: 13vw;
    padding-bottom: 11vw;
  }

  /* Syncopate 는 자폭이 넓어 9vw 면 한 줄이 뷰포트를 넘겨 좌측이 잘린다 */
  .con11_title {
    margin-right: 0;
    font-size: 6.8vw;
    line-height: 1.25;
    letter-spacing: -0.2vw;
    white-space: nowrap;
  }

  .con11_slide {
    margin-top: 4vw;
  }

  .con11_img {
    width: 44vw;
  }

  .con11_desc {
    margin-top: 7vw;
    padding: 0 5vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
  }


  /* ══════════ CON12 : 영상으로 전하는 바차의 이야기 ══════════ */
  .con12 {
    padding-top: 13vw;
    padding-bottom: 13vw;
    background-size:
      94% 100%,
      14vw 100%,
      14vw 100%;
    background-position:
      center 0,
      -2vw 0,
      90vw 0;
  }

  .con12_title {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  .con12_story {
    left: 50%;
    top: 44vw;
    transform: translateX(-50%);
    font-size: 20vw;
    line-height: 1;
    letter-spacing: -0.8vw;
  }

  /* con09 와 같은 구성 — 화살표를 영상 아래 가운데로 내리고 영상은 폭을 거의 꽉 채운다 */
  .con12_stage {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 7vw;
    column-gap: 4vw;
    row-gap: 5vw;
  }

  .con12_arrow {
    order: 2;
    width: 10vw;
    height: 10vw;
    margin-bottom: 0;
  }

  .con12_arrow_img {
    width: 4vw;
  }

  .con12_video {
    order: 1;
    width: 92vw;
    height: 50.9vw;
  }

  /* 유튜브 재생 버튼 — PC 는 calc(--px*90) 이라 모바일에선 17px 로 찌부된다 */
  .video-facade_play {
    width: 20vw;
    height: 14vw;
    border-radius: 3.5vw;
  }

  .video-facade_play::after {
    border-width: 2.9vw 0 2.9vw 4.9vw;
    margin-left: 1.1vw;
  }


  /* ══════════ CON13 : 작은 디테일까지 바차답게 (★ 핀 해제 · 스티커 벽 생략) ══════════ */
  /* PC 는 스티커 벽 → 원형 리빌 2레이어 핀 스테이지. 모바일은 핀이 없어
     리빌 연출이 성립하지 않으므로 아래 레이어를 걷어내고 디테일만 흐름으로 편다 */
  .con13 {
    height: auto;
  }

  .con13_stickers {
    display: none;
  }

  .con13_detail {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    height: auto;
  }

  .con13_cols {
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  /* 세로(vertical) 슬라이드라 터치가 잡히면 페이지 스크롤을 먹는다 → 컨테이너째 터치 차단 */
  .con13_slide {
    width: 100%;
    height: 82vw;
    pointer-events: none;
  }

  .con13_slide > .swiper-wrapper {
    pointer-events: none;
  }

  .con13_right {
    order: -1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 11vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 12vw;
    column-gap: 0;
  }

  /* PC 는 세로쓰기 2열 → 모바일은 가로쓰기 2줄 */
  .con13_title {
    flex-direction: column;
    align-items: center;
    row-gap: 1.5vw;
    column-gap: 0;
    font-size: 7vw;
    line-height: 1.3;
    letter-spacing: -0.25vw;
  }

  .con13_title_a {
    writing-mode: horizontal-tb;
  }

  .con13_title_b {
    writing-mode: horizontal-tb;
    margin-top: 0;
  }

  .con13_desc {
    margin-top: 5vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  .con13_illust {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 70vw;
    margin-top: 7vw;
  }

  .con13_band {
    height: 12vw;
  }

  .con13_band_track {
    width: 340vw;
  }


  /* ══════════ CON14 : 고객이 찾아오는 이유 ══════════ */
  .con14 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 13vw;
    padding-bottom: 13vw;
    padding-left: 5%;
    padding-right: 5%;
  }

  .con14_left {
    align-items: center;
    margin-top: 0;
  }

  .con14_title {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
    text-align: center;
  }

  .con14_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  .con14_right {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 9vw;
  }

  /* 탭 3종 — PC 세로 스택(우측정렬) → 모바일 가로 wrap */
  .con14_tabs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    column-gap: 4vw;
    row-gap: 2vw;
  }

  .con14_tab_txt {
    font-size: 3.6vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }

  .con14_tab_line {
    display: none;
  }

  .con14_cards {
    width: 100%;
    margin-left: 0;
    margin-top: 7vw;
  }

  .con14_card {
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 12vw;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 9vw;
    box-shadow: 1.5vw 1.5vw 0 0 var(--color-point);
  }

  .con14_badge {
    left: 4%;
    top: 2.5vw;
    width: 21vw;
    padding-left: 9.5vw;
    font-size: 3.6vw;
    line-height: 8vw;
  }

  .con14_badge_low {
    top: 2.5vw;
  }

  .con14_card_imgs {
    margin-top: 3vw;
    column-gap: 2vw;
  }

  .con14_img_a {
    width: 38vw;
  }

  .con14_img_b {
    width: 38vw;
  }

  .con14_pill {
    top: 23vw;
    width: 62vw;
    font-size: 4vw;
    line-height: 10vw;
    letter-spacing: -0.12vw;
    box-shadow: 0.2vw 0.3vw 3vw 0 rgba(0, 0, 0, 0.3608);
  }

  .con14_card_txt {
    margin-top: 5vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  .con14_txt_02 {
    margin-top: 5vw;
  }

  .con14_search {
    width: 80vw;
    margin-top: 3vw;
    padding-left: 4vw;
    column-gap: 2vw;
    border-radius: 2vw;
    line-height: 9.5vw;
  }

  .con14_search_txt {
    font-size: 3.6vw;
    letter-spacing: -0.1vw;
  }

  .con14_icon_img {
    width: 5vw;
  }

  .con14_shot {
    width: 80vw;
    margin-top: 3vw;
  }

  .con14_shot_img {
    width: 80vw;
    border-radius: 2vw;
  }

  .con14_sticker_img {
    width: 36vw;
  }

  .con14_sticker_02 {
    left: 58%;
    top: 24vw;
  }

  .con14_sticker_03 {
    left: 56%;
    top: 36vw;
  }


  /* ══════════ CON15 : 현장의 경험을 함께 나눕니다 ══════════ */
  .con15 {
    padding-top: 13vw;
  }

  .con15_title {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  .con15_desc {
    margin-top: 4vw;
    padding: 0 5vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
  }

  /* 밴드 높이 = 셀 padding 16 + 아이콘 20 + 제목 11 + 본문 21 + 하단 여백 20 */
  .con15_band {
    height: 88vw;
    margin-top: 9vw;
  }

  .con15_cell {
    width: 84vw;
    padding-top: 16vw;
  }

  .con15_icon_img {
    width: 20vw;
  }

  .con15_item_title {
    margin-top: 5vw;
    transform: translateY(-2vw);
    font-size: 4.4vw;
    line-height: 1.4;
    letter-spacing: -0.12vw;
    white-space: normal;
    text-align: center;
  }

  .con15_item_txt {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
  }

  .con15_nav {
    top: 69vw;
    width: 98vw;
  }

  .con15_item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 8vw;
  }

  .con15_prev {
    padding: 3vw 7vw;
  }

  .con15_next {
    padding: 3vw 7vw;
  }

  .con15_arrow_img {
    width: 5vw;
  }


  /* ══════════ CON16 : 시작의 부담은 낮추고 ══════════ */
  .con16 {
    padding-top: 13vw;
    padding-bottom: 13vw;
  }

  .con16_title {
    font-size: 7vw;
    line-height: 9.6vw;
    letter-spacing: -0.25vw;
  }

  .con16_points {
    flex-direction: column;
    align-items: center;
    width: 88%;
    margin-top: 8vw;
    row-gap: 4vw;
  }

  .con16_point {
    width: 100%;
    height: auto;
    padding-bottom: 7vw;
    border-radius: 4vw;
  }

  .con16_point_num {
    width: 17vw;
    height: 8vw;
    margin-top: 6vw;
  }

  .con16_point_num span {
    font-size: 3.4vw;
    line-height: 1.3;
  }

  .con16_point_tt {
    margin-top: 3vw;
    font-size: 4.4vw;
    line-height: 1.4;
    letter-spacing: -0.12vw;
  }

  .con16_point_desc {
    margin-top: 2vw;
    padding: 0 4vw;
    font-size: 3.3vw;
    line-height: 5.4vw;
  }

  .con16_promos {
    flex-direction: column;
    align-items: center;
    width: 88%;
    margin-top: 4vw;
    row-gap: 4vw;
  }

  .con16_promo {
    width: 100%;
    height: auto;
    padding-bottom: 7vw;
    border-radius: 4vw;
  }

  .con16_promo_tt {
    margin-top: 6vw;
    font-size: 4.4vw;
    line-height: 1.4;
    letter-spacing: -0.12vw;
  }

  .con16_promo_old {
    margin-top: 2vw;
    font-size: 3.3vw;
    line-height: 1.4;
  }

  .con16_promo_new {
    margin-top: 2vw;
    font-size: 9vw;
    line-height: 1.3;
    letter-spacing: -0.25vw;
    text-shadow: 0 0 3vw rgba(28, 130, 255, 0.62),
                 0 0 1.5vw rgba(28, 130, 255, 0.62);
  }

  .con16_cost {
    width: 92%;
    margin-top: 8vw;
    padding-top: 11vw;
    padding-bottom: 11vw;
  }

  .con16_cost_tt {
    font-size: 7vw;
    line-height: 1.3;
    letter-spacing: -0.25vw;
  }

  .con16_vat_row {
    width: 88%;
    margin-top: 3vw;
  }

  .con16_cost_vat {
    font-size: 3vw;
    line-height: 1.3;
  }

  .con16_tbl {
    width: 88%;
    margin-top: 2vw;
  }

  .con16_thead {
    height: 11vw;
  }

  .con16_th {
    font-size: 3.3vw;
    line-height: 1.4;
  }

  .con16_th_item {
    width: 23%;
  }

  /* 금액 열은 배지("10호점까지 250만 원")가 들어가므로 내용 열에서 폭을 넘겨받는다 */
  .con16_th_desc {
    width: 43%;
  }

  .con16_th_amt {
    width: 34%;
  }

  .con16_td_item {
    font-size: 3.2vw;
    line-height: 4.6vw;
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
  }

  .con16_td_desc {
    padding-left: 3vw;
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
    font-size: 3vw;
    line-height: 4.6vw;
  }

  .con16_td_amt {
    font-size: 3.2vw;
    line-height: 4.6vw;
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
  }

  .con16_tbl tbody tr:first-child td {
    padding-top: 3.5vw;
  }

  /* 취소선 화살표 + 파란 배지 — PC 는 금액 오른쪽으로 뻗는 가로 배치(absol).
     모바일 셀 폭(≈110px)엔 안 들어가므로 금액 아래 세로 흐름으로 펴고 화살표를 아래로 돌린다 */
  .con16_mark {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
  }

  /* 연결 화살표 대신 원래 금액에 취소선을 긋는다 */
  .con16_mark_arrow {
    display: none;
  }

  /* 배지가 있는 3행(가맹비·교육비·보증금)의 원래 금액만 취소선.
     .con16_mark 를 inline-flex(atomic inline box)로 만들어 배지까지 취소선이 번지는 걸 막는다 */
  .con16_td_amt:has(.con16_mark) {
    text-decoration: line-through;
  }

  .con16_mark {
    display: inline-flex;
  }

  .con16_badge {
    height: auto;
    padding: 1.2vw 1.6vw;
    border-radius: 1vw;
    font-size: 2.7vw;
    line-height: 1.4;
    white-space: normal;
  }

  .con16_total {
    width: 88%;
    height: 13vw;
    margin-top: 3vw;
  }

  .con16_total_lb {
    font-size: 3.3vw;
    line-height: 1.3;
  }

  .con16_total_num {
    margin-left: 2vw;
    font-size: 5vw;
    line-height: 1.3;
    letter-spacing: -0.15vw;
  }

  .con16_total_sub {
    margin-left: 1.5vw;
    font-size: 3vw;
    line-height: 1.3;
  }

  .con16_note_row {
    width: 88%;
    margin-top: 2vw;
  }

  .con16_note {
    font-size: 2.8vw;
    line-height: 4.4vw;
  }

  .con16_flow {
    width: 92%;
    margin-top: 6vw;
    padding-top: 11vw;
    padding-bottom: 11vw;
  }

  .con16_flow_tt {
    font-size: 7vw;
    line-height: 1.3;
    letter-spacing: -0.25vw;
  }

  .con16_flow_list {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    width: 88%;
    margin-top: 7vw;
    column-gap: 0;
    row-gap: 3vw;
  }

  .con16_flow_item {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }

  .con16_flow_item_end {
    width: 100%;
  }

  .con16_flow_card {
    width: 100%;
    height: auto;
    padding-bottom: 7vw;
    border-radius: 4vw;
  }

  .con16_flow_ico {
    width: 14vw;
    height: 14vw;
    margin-top: 6vw;
  }

  .con16_ico01 {
    width: 7vw;
  }

  .con16_ico02 {
    width: 7vw;
  }

  .con16_ico03 {
    width: 6.3vw;
  }

  .con16_ico04 {
    width: 6.5vw;
  }

  .con16_ico05 {
    width: 6.3vw;
  }

  .con16_ico06 {
    width: 6.5vw;
  }

  .con16_ico07 {
    width: 6.3vw;
  }

  .con16_ico08 {
    width: 6.3vw;
  }

  .con16_flow_item_tt {
    margin-top: 2.5vw;
    font-size: 4.2vw;
    line-height: 1.4;
    letter-spacing: -0.12vw;
  }

  .con16_flow_item_desc {
    margin-top: 2vw;
    padding: 0 4vw;
    font-size: 3.2vw;
    line-height: 5vw;
  }

  /* 흐름이 가로 → 세로로 바뀌므로 화살표도 아래를 향하게 */
  .con16_flow_arrow {
    width: 4.5vw;
    margin-top: 3vw;
    transform: rotate(90deg);
  }

  /* 구슬 · 금화 · 유리잔 = PC 좌우 여백 데코 (모바일엔 여백이 없다) */
  .con16_dot01 {
    display: none;
  }

  .con16_dot02 {
    display: none;
  }

  .con16_coin01 {
    display: none;
  }

  .con16_coin02 {
    display: none;
  }

  .con16_glass01 {
    display: none;
  }

  .con16_glass02 {
    display: none;
  }


  /* ══════════ CON17 : 좋은 대화가 머무는 곳 ══════════ */
  .con17 {
    padding-top: 11vw;
    padding-bottom: 11vw;
  }

  .con17_card {
    width: 90%;
    height: auto;
    padding-top: 8vw;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 10vw;
  }

  .con17_clip {
    left: 6%;
    top: -6vw;
    width: 6vw;
  }

  .con17_photo {
    width: 100%;
  }

  .con17_title {
    margin-top: -4vw;
    padding: 2.6vw 5vw 2.4vw;
    font-size: 5.4vw;
    letter-spacing: -0.18vw;
  }

  .con17_desc {
    margin-top: 6vw;
  }

  .con17_txt {
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
  }

  .con17_desc p:nth-child(2),
  .con17_desc p:nth-child(3) {
    margin-top: 4vw;
  }

  .con17_logo {
    width: 84%;
    margin-top: 7vw;
  }


  /* ══════════ CON18 : 바차 매장안내 ══════════ */
  .con18 {
    padding-top: 14vw;
    padding-bottom: 12vw;
    background-position: 3vw 2vw;
    background-image:
      repeating-linear-gradient(90deg, #f0f0f2 0 1px, transparent 1px 5vw),
      repeating-linear-gradient(180deg, #f0f0f2 0 1px, transparent 1px 5vw);
    box-shadow: inset 0 0 0 3vw #014190;
  }

  .con18_title {
    font-size: 7vw;
    line-height: 1.3;
    letter-spacing: -0.25vw;
  }

  /* 검색바를 지도 박스 위로 올린다 (PC 는 박스 상단에 걸치는 absol) */
  .con18_inner {
    flex-direction: column;
    align-items: center;
    width: 88%;
    margin-top: 8vw;
  }

  .con18_search {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    order: -1;
    width: 100%;
    height: 13vw;
    margin-bottom: 4vw;
    padding-left: 6vw;
    padding-right: 1.5vw;
  }

  .con18_search_input {
    font-size: 3.6vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }

  .con18_search_btn {
    width: 10vw;
    height: 10vw;
  }

  .con18_search_btn img {
    width: 5vw;
  }

  .con18_box {
    flex-direction: column;
    align-items: center;
    height: auto;
    border-radius: 0;
  }

  .con18_list {
    order: 1;
    width: 100%;
    border-radius: 0;
  }

  .con18_store_list {
    width: 100%;
    height: 72vw;
    padding-left: 0;
  }

  .con18_store_list::-webkit-scrollbar {
    width: 1.2vw;
  }

  .con18_store_list::-webkit-scrollbar-thumb {
    border-radius: 0.6vw;
  }

  .con18_store {
    width: 100%;
    height: auto;
    padding: 6vw 5vw;
  }

  .con18_store_name {
    font-size: 4.2vw;
    line-height: 1.3;
    letter-spacing: -0.15vw;
  }

  .con18_store_addr {
    margin-top: 2vw;
    font-size: 3.3vw;
    line-height: 4.8vw;
    letter-spacing: -0.12vw;
  }

  .con18_store_tel {
    margin-top: 1.5vw;
    font-size: 3.2vw;
    line-height: 1.3;
    letter-spacing: -0.12vw;
  }

  .con18_store_plus {
    width: 9vw;
    height: 9vw;
    margin-top: 0;
  }

  .con18_plus_h {
    width: 3.4vw;
    height: 1px;
  }

  .con18_plus_v {
    width: 1px;
    height: 3.4vw;
  }

  .con18_store_none {
    width: 100%;
    padding-top: 10vw;
    padding-bottom: 10vw;
    padding-left: 5vw;
    font-size: 3.3vw;
    line-height: 1.4;
  }

  .con18_map {
    width: 100%;
    height: 82vw;
  }

  .con18_popup {
    left: 0;
    top: 0;
    width: 100%;
  }

  .con18_popup_inner {
    width: 84vw;
    padding: 6vw;
    border-radius: 5vw;
  }

  .con18_popup_close {
    top: 9vw;
    right: 9vw;
    width: 8vw;
    height: 8vw;
  }

  .con18_popup_close span {
    font-size: 4.6vw;
  }

  .con18_popup_photo {
    height: 46vw;
    border-radius: 3vw;
  }

  .con18_popup_name {
    margin-top: 4vw;
    font-size: 4.6vw;
    line-height: 1.3;
    letter-spacing: -0.15vw;
  }

  .con18_popup_info {
    margin-top: 3vw;
  }

  .con18_popup_row {
    column-gap: 3vw;
  }

  .con18_popup_row + .con18_popup_row {
    margin-top: 2vw;
  }

  .con18_popup_label {
    font-size: 3.4vw;
    line-height: 5.2vw;
    letter-spacing: -0.12vw;
  }

  .con18_popup_value {
    font-size: 3.4vw;
    line-height: 5.2vw;
    letter-spacing: -0.12vw;
  }

  .con18_popup_link {
    height: 12vw;
    margin-top: 5vw;
    font-size: 3.8vw;
    letter-spacing: -0.14vw;
  }

  .map_marker_text {
    padding: 2vw 4vw;
    font-size: 3.2vw;
    line-height: 1.3;
    letter-spacing: -0.12vw;
  }


  /* ══════════ CON19 : 창업문의 ══════════ */
  .con19 {
    height: auto;
    padding-top: 15vw;
    padding-bottom: 14vw;
  }

  .con19_logo {
    width: 78vw;
    filter:
      drop-shadow(0 0 0.5vw rgba(28, 130, 255, 1))
      drop-shadow(0 0 1vw rgba(28, 130, 255, 0.8))
      drop-shadow(0 0 2vw rgba(28, 130, 255, 0.5));
  }

  .con19_panel {
    flex-direction: column;
    align-items: center;
    width: 88%;
    height: auto;
    margin-top: -3vw;
    padding: 13vw 5vw 11vw;
    border-radius: 6vw;
    box-shadow: 0 0 12vw rgba(28, 130, 255, 0.38);
  }

  .con19_left {
    align-items: center;
    margin-top: 0;
    margin-left: 0;
  }

  .con19_title {
    font-size: 6.4vw;
    line-height: 9vw;
    letter-spacing: -0.3vw;
    text-align: center;
  }

  .con19_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 5.6vw;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  .con19_form {
    width: 100%;
    margin-top: 8vw;
    margin-right: 0;
  }

  .con19_row {
    height: 13vw;
    padding-left: 3vw;
  }

  /* 성함 · 연락처 2단 → 세로 2행 (행 자체가 각각 밑줄을 갖는다) */
  .con19_row_half {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding-left: 0;
    border-bottom: 0;
  }

  .con19_field_name {
    box-sizing: border-box;
    width: 100%;
    height: 13vw;
    padding-left: 3vw;
    border-bottom: 1px solid #ffffff;
  }

  .con19_field_tel {
    box-sizing: border-box;
    width: 100%;
    height: 13vw;
    padding-left: 3vw;
    border-bottom: 1px solid #ffffff;
  }

  .con19_row_shop {
    height: 14vw;
  }

  .con19_label {
    width: 23vw;
    font-size: 3.4vw;
  }

  .con19_label_name {
    width: 15vw;
  }

  .con19_label_tel {
    width: 19vw;
  }

  .con19_label_shop {
    width: 27vw;
  }

  .con19_input {
    font-size: 3.3vw;
    letter-spacing: -0.1vw;
  }

  .con19_opt {
    width: 16vw;
    height: 8.5vw;
    font-size: 3.2vw;
    letter-spacing: -0.1vw;
  }

  .con19_opt_off {
    margin-left: 1.5vw;
  }

  .con19_agree {
    margin-top: 4vw;
  }

  .con19_check {
    width: 4.2vw;
    height: 4.2vw;
  }

  .con19_agree_txt {
    margin-left: 2vw;
    font-size: 3.2vw;
    letter-spacing: -0.1vw;
  }

  .con19_submit {
    height: 13vw;
    margin-top: 5vw;
    font-size: 4vw;
    letter-spacing: -0.12vw;
  }

}